<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        main{
              perspective: 800px;
            }
        section{
            width:200px;
            height: 100px;
            margin: 35vh auto;
            transform-style:preserve-3d;
            transition: 1s all;
           }
        img{
            width: 200px;
            height: 100px;
            position:absolute;
           }
           img:nth-child(1){
              transform: translateZ(294px);
              
            }
           img:nth-child(2){
              transform:  rotateY(40deg) translateZ(294px);
           }
            img:nth-child(3){
              transform:  rotateY(80deg) translateZ(294px);
           }
            img:nth-child(4){
              transform:  rotateY(120deg) translateZ(294px);
           }
            img:nth-child(5){
              transform:  rotateY(160deg) translateZ(294px);
           }
            img:nth-child(6){
              transform:  rotateY(200deg) translateZ(294px);
           }
            img:nth-child(7){
              transform:  rotateY(240deg) translateZ(294px);
           }
            img:nth-child(8){
              transform:  rotateY(280deg) translateZ(294px);
           }
            img:nth-child(9){
              transform:  rotateY(320deg) translateZ(294px);
           }
    </style>
</head>
<body>
    <main>
        <section>
            <img src="image/1.jpg" alt="">
            <img src="image/2.jpg" alt="">
            <img src="image/3.jpg" alt="">
            <img src="image/4.jpg" alt="">
            <img src="image/5.jpg" alt="">
            <img src="image/6.jpg" alt="">
            <img src="image/7.jpg" alt="">
            <img src="image/8.jpg" alt="">
            <img src="image/9.jpg" alt="">
        </section>
        </main>
        <script>
            var main = document.querySelector('main')
            var sec = document.querySelector('section')
             var n = 0
            main.onclick = function(){
                n = n - 40
              sec.style.transform = 'rotateY('+n+'deg)'
            }        
            </script>
</body>
</html>